<!-- 支付成功页面 -->
<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <view class="main">
      <img src="@/assets/paySuccess/success.svg" alt="">
      <view class="text">
        <view class="p_text">支付成功</view>
        <view class="p_tip">你可能需要进行一下操作</view>
      </view>
      <view class="bottom">
        <up-button hairline text="查看订单" @click="seeOrder"></up-button>
        <up-button hairline text="返回食堂首页" @click="backHome"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onActivated } from "vue";
import useUserStore from '@/store/modules/user'
import useOrderStore from "@/store/modules/order";

const userStore = useUserStore()
let orderStore = useOrderStore();

/**
 * 查看订单
 */
const seeOrder = () => {
  uni.navigateBack({ delta: 1 });
}

/**
 * 返回食堂首页
 */
const backHome = () => {
  uni.reLaunch({ url: '/pages/index' })

}

</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;

  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 140rpx;
      height: 140rpx;
      margin-top: 40rpx;
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20rpx 0 30rpx 0;

      .p_text {
        font-size: 32rpx;
        color: $uni-text-color;
      }

      .p_tip {
        font-size: 28rpx;
        color: $uni-text-color-grey;
      }
    }

    .bottom {
      display: flex;
      width: 80%;
      justify-content: space-evenly;
      font-size: 32rpx;
      gap: 40rpx;
    }
  }

}
</style>
